<template>
  <div class="details">
    <div class="headline">基础信息</div>
    <div class="matter" v-if="soucre == 0 || soucre == 1">
      <div class="top">
        <div class="list" v-for="(item, index) in 7" :key="index">
          <div class="key">
            {{
              index == 0
                ? "任务类型"
                : index == 1
                  ? "联系方式"
                  : index == 2
                    ? "状态"
                    : index == 3
                      ? "创建时间"
                      : index == 4
                        ? "任务金额（元）"
                        : index == 5
                          ? "任务名称"
                          : index == 6
                            ? "浏览次数"
                            : ""
            }}:
          </div>
          <div class="value">
            {{
              index == 0
                ? detailsObj.taskType == 0
                  ? "线下任务"
                  : detailsObj.taskType == 1
                    ? "线上任务"
                    : detailsObj.taskType == 2
                      ? "合作任务"
                      : detailsObj.taskType == 3
                        ? "兼职任务"
                        : ""
                : index == 1
                  ? detailsObj.taskPhone
                  : index == 2
                    ? detailsObj.status == 0
                      ? "待发布"
                      : detailsObj.status == 1
                        ? "已发布"
                        : detailsObj.status == 2
                          ? "已下架"
                          : ""
                    : index == 3
                      ? detailsObj.createTime
                      : index == 4
                        ? detailsObj.taskPrice
                        : index == 5
                          ? detailsObj.taskName
                          : index == 6
                            ? tableDataBrowseTotal
                            : ""
            }}
          </div>
        </div>
      </div>

      <div class="center">
        <div class="list">
          <div class="key">任务描述:</div>
          <div class="value">
            {{ detailsObj.taskDesc }}
          </div>
        </div>
      </div>

      <div class="bottom">
        <div class="list">
          <div class="key">任务步骤:</div>
          <div class="value">
            <div v-html="detailsObj.taskContent"></div>
            <!-- <div class="block" v-for="(item, index) in 3" :key="index">
              <div class="title">
                {{
                  index == 0
                    ? "1.扫一扫，下载，填邀请码88666666"
                    : index == 1
                    ? "2.点我的截图，提交电话，及修改邀请码，提交申核"
                    : index == 2
                    ? "3.打开{我的}点(我的地推)截图，提交申核"
                    : ""
                }}
              </div>
              <img class="imgs" src="" alt="" />
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="matter" v-if="soucre == 3">
      <div class="top">
        <div class="list" v-for="(item, index) in 8" :key="index">
          <div class="key">
            {{
              index == 0
                ? "任务类型"
                : index == 1
                  ? "联系方式"
                  : index == 2
                    ? "状态"
                    : index == 3
                      ? "创建时间"
                      : index == 4
                        ? "任务金额（元）"
                        : index == 5
                          ? "任务名称"
                          : index == 6
                            ? "工作日期"
                            : index == 7
                              ? "浏览次数"
                              : ""
            }}:
          </div>
          <div class="value">
            {{
              index == 0
                ? detailsObj.taskType == 0
                  ? "线下任务"
                  : detailsObj.taskType == 1
                    ? "线上任务"
                    : detailsObj.taskType == 2
                      ? "合作任务"
                      : detailsObj.taskType == 3
                        ? "兼职任务"
                        : ""
                : index == 1
                  ? detailsObj.taskPhone
                  : index == 2
                    ? detailsObj.status == 0
                      ? "待发布"
                      : detailsObj.status == 1
                        ? "已发布"
                        : detailsObj.status == 2
                          ? "已下架"
                          : ""
                    : index == 3
                      ? detailsObj.createTime
                      : index == 4
                        ? detailsObj.taskPrice
                        : index == 5
                          ? detailsObj.taskName
                          : index == 6
                            ? detailsObj.workTime
                            : index == 7
                              ? tableDataBrowseTotal
                              : ""
            }}
          </div>
        </div>
      </div>

      <div class="overview">
        <div class="list">
          <div class="key">岗位要求:</div>
          <div class="value">
            <div v-html="detailsObj.taskContent"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="matter" v-if="soucre == 2">
      <div class="top">
        <div class="list" v-for="(item, index) in 8" :key="index">
          <div class="key">
            {{
              index == 0
                ? "任务类型"
                : index == 1
                  ? "联系方式"
                  : index == 2
                    ? "状态"
                    : index == 3
                      ? "创建时间"
                      : index == 4
                        ? "任务金额（元）"
                        : index == 5
                          ? "任务名称"
                          : index == 6
                            ? "合作区域"
                            : index == 7
                              ? "合作类型"
                              : ""
            }}:
          </div>
          <div class="value">
            {{
              index == 0
                ? detailsObj.taskType == 0
                  ? "线下任务"
                  : detailsObj.taskType == 1
                    ? "线上任务"
                    : detailsObj.taskType == 2
                      ? "合作任务"
                      : detailsObj.taskType == 3
                        ? "兼职任务"
                        : ""
                : index == 1
                  ? detailsObj.taskPhone
                  : index == 2
                    ? detailsObj.status == 0
                      ? "待发布"
                      : detailsObj.status == 1
                        ? "已发布"
                        : detailsObj.status == 2
                          ? "已下架"
                          : ""
                    : index == 3
                      ? detailsObj.createTime
                      : index == 4
                        ? detailsObj.taskPrice
                        : index == 5
                          ? detailsObj.taskName
                          : index == 6
                            ? detailsObj.cooperationProvince == null ? '暂无' : detailsObj.cooperationProvince
                              + '-' +
                              detailsObj.cooperationCity
                              + '-' +
                              detailsObj.cooperationArea
                            : index == 7
                              ? detailsObj.taskJoinClassifyName
                              : ""
            }}
          </div>
        </div>
      </div>

      <div class="center" style="display: flex; align-items: center">
        <div class="list" style="width: 50%">
          <div class="key">任务描述:</div>
          <div class="value">
            {{ detailsObj.taskDesc }}
          </div>
        </div>

        <div class="list" style="width: 50%">
          <div class="key">浏览次数:</div>
          <div class="value"> {{ tableDataBrowseTotal }}</div>
        </div>
      </div>

      <div class="overview">
        <div class="list">
          <div class="key">合作概述:</div>
          <div class="value">
            <div v-html="detailsObj.taskContent"></div>
            <!-- <div class="block" v-for="(item, index) in 4" :key="index">
              <div class="title">
                {{
                  index == 0
                    ? "1.项目介绍"
                    : index == 1
                      ? "2.项目要求"
                      : index == 2
                        ? "3.结算周期"
                        : index == 3
                          ? "4.其他补充（选填）"
                          : ""
                }}
              </div>
              <div class="text">
                {{
                  index == 0
                    ? "项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍"
                    : index == 1
                      ?
                      "项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情，要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体等项目详情、要求、适合群体劳"
                      : index == 2
                        ? "结算时间"
                        : index == 3
                          ?
                          "补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明补充说明"
                          : ""
                }}
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="headline" style="margin-top: 20px;">访问动态</div>
    <div class="table" v-loading="loadingBrowse">
      <el-table :data="tableDataBrowse" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="" label="用户头像">
          <template slot-scope="scope">
            <img class="table-img" :src="scope.row.avatar" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column prop="phone" label="用户手机号"> </el-table-column>
        <el-table-column prop="createTime" label="访问时间"> </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeBrowseChange" @current-change="handleCurrentBrowseChange" background
          layout="prev, pager, next" :total="tableDataBrowseTotal" :current-page="pageBrowse">
        </el-pagination>
      </div>
    </div>


    <div class="headline">报名统计</div>
    <div class="table" v-loading="loadingParticipation">
      <el-table :data="tableDataParticipation" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="" label="用户头像">
          <template slot-scope="scope">
            <img class="table-img" :src="scope.row.avatar" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column prop="phone" label="用户手机号"> </el-table-column>
        <el-table-column prop="desc" label="审核内容" width="300">
        </el-table-column>
        <el-table-column prop="" label="执行状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">待提交</el-tag>
            <el-tag v-if="scope.row.status == 1" type="">已提交</el-tag>
            <el-tag v-if="scope.row.status == 2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status == 3" type="error">审核失败</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="报名时间"> </el-table-column>
        <el-table-column prop="linkNum" label="沟通联系次数"> </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeParticipationChange" @current-change="handleCurrentParticipationChange"
          background layout="prev, pager, next" :total="tableDataParticipationTotal" :current-page="pageParticipation">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  makeTaskListId,
  makeTaskListBrowse,
  makeTaskListParticipation,
} from "@/api/make";

export default {
  data() {
    return {
      id: "",
      soucre: null,
      //---------
      detailsObj: {},
      //--------
      pageBrowse: 1,
      limitBrowse: 10,
      loadingBrowse: false,
      tableDataBrowse: [],
      tableDataBrowseTotal: 0,
      //---------
      pageParticipation: 1,
      limitParticipation: 10,
      loadingParticipation: false,
      tableDataParticipation: [],
      tableDataParticipationTotal: 0,
    };
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }

    this.soucre = this.$route.query.soucre;
    this.makeTaskListIdMet();
    //--------
    this.makeTaskListBrowseMet();
    this.makeTaskListParticipationMet();
  },
  methods: {
    makeTaskListIdMet() {
      let params = this.id;

      makeTaskListId(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.taskPrice = Number(
            res.resultData.taskPrice / 100
          ).toFixed(2);

          this.detailsObj = res.resultData;
        }
      });
    },

    makeTaskListBrowseMet() {
      let params = {
        taskId: this.id,
        pageSize: this.limitBrowse,
        pageNo: this.pageBrowse,
      };

      makeTaskListBrowse(params).then((res) => {
        if (res.errorCode == null) {
          this.tableDataBrowse = res.resultData.userTaskBrowseList;
          this.tableDataBrowseTotal = res.resultData.totalNum;
          this.loadingBrowse = false
        }
      });
    },
    makeTaskListParticipationMet() {
      let params = {
        taskId: this.id,
        pageSize: this.limitParticipation,
        pageNo: this.pageParticipation,
      };

      makeTaskListParticipation(params).then((res) => {
        if (res.errorCode == null) {
          this.tableDataParticipation = res.resultData.taskUserList;
          this.tableDataParticipationTotal = res.resultData.totalNum;
           this.loadingParticipation = false
        }
      });
    },

    //---------
    handleSizeBrowseChange(val) {
      this.limitBrowse = val;
      this.loadingBrowse = true;
      this.makeTaskListBrowseMet();
    },
    handleCurrentBrowseChange(val) {
      this.pageBrowse = val;
      this.loadingBrowse = true;
      this.makeTaskListBrowseMet();
    },
    //---------
    handleSizeParticipationChange(val) {
      this.limitParticipation = val;
      this.loadingParticipation = true;
      this.makeTaskListParticipationMet();
    },
    handleCurrentParticipationChange(val) {
      this.pageParticipation = val;
      this.loadingParticipation = true;
      this.makeTaskListParticipationMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");

.details {
  .headline {
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #eef5fd;
    border-radius: 5px;
    display: flex;
    align-items: center;
  }

  .matter {
    margin-top: 20px;

    .top,
    .center,
    .bottom {
      display: flex;
      flex-wrap: wrap;

      .list {
        width: calc((100% / 4));
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        .value {
          margin-left: 10px;
        }
      }
    }

    .center {
      .list {
        width: 100%;
      }
    }

    .bottom {
      .list {
        width: 100%;
        align-items: baseline;

        .value {
          .block {
            margin-bottom: 10px;

            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .imgs {
              width: 50px;
              height: 50px;
              border: 1px solid;
            }
          }
        }
      }
    }

    .overview {
      .list {
        .key {
          margin-bottom: 10px;
        }

        .value {
          .block {
            margin-bottom: 20px;

            .title {
              font-weight: 600;
              margin-bottom: 10px;
            }

            .text {
              font-size: 400;
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }
      }
    }
  }

  .table {
    margin-top: 10px;
    width: 100%;
    margin-bottom: 20px;

    .table-img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>